div {
    transform-style: preserve-3d;
}

.wai {
    animation: 30s wai linear infinite;
    margin-top: -450px;
}

.box {
    width: 300px;
    height: 300px;
    /* border: 10px solid yellow; */
    position: relative;
    margin: 500px auto;
    transform: rotateX(100deg) rotateY(15deg);
    animation: 30s turn linear infinite;
}

img {
    width: 300px;
    height: 400px;
    position: absolute;
    opacity: 0.7;
    animation: 15s amplify ease-in-out infinite;
}

div.img:nth-child(1) {
    transform: rotateY(0deg);
}

div.img:nth-child(2) {
    transform: rotateY(45deg);
}

div.img:nth-child(3) {
    transform: rotateY(90deg);
}

div.img:nth-child(4) {
    transform: rotateY(135deg);
}

div.img:nth-child(5) {
    transform: rotateY(180deg);
}

div.img:nth-child(6) {
    transform: rotateY(225deg);
}

div.img:nth-child(7) {
    transform: rotateY(270deg);
}

div.img:nth-child(8) {
    transform: rotateY(315deg);
}

@keyframes amplify {
    from {
        transform: translateZ(0px);
    }
    50% {
        transform: translateZ(500px);
    }
    to {
        transform: translateZ(0px);
    }
}

@keyframes turn {
    from {
        transform: rotateY(0);
    }
    50% {
        transform: rotateY(180deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

